<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1" cellspacing="0">
        <thead>
           <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
           </tr>
        </thead>
        <tbody>
            <!-- js渲染 -->
        </tbody>
    </table>
    <script>
//         1.在页面上根据数据，动态创建表格
// var arr = [ { name: 'Jack', age: 18, gender: '男' },{ name: 'Rose', age: 20, gender: '女' },{ name: 'Top', age: 22, gender: '男' } ] 创建一个表格，展示上面数组中的信息​2.根据数据创建表格实现隔行变色功能
var users = [ { name: 'Jack', age: 18, gender: '男' },{ name: 'Rose', age: 20, gender: '女' },{ name: 'Top', age: 22, gender: '男' } ,{ name: 'tom', age: 18, gender: '女' },{ name: 'Jerry', age: 34, gender: '女' }];

        // 获取到tbody元素
        var tbody = document.querySelector("tbody");
        //循环遍历users数据
        users.forEach(function(item ,key){
            //这里的item就是数据中的每一个对象,每一个对象生成一个tr标签
            console.log(item)
            var tr =document.createElement("tr");
            if (key%2==0){
                tr.style.backgroundColor=`pink`;
                
            }else{
                tr.style.color=`red`;
            }

            //循环遍历item
            for(var key in item){
                //生成td标签
                var td = document.createElement("td");
                td.innerHTML = item[key]

                //把td插入到tr内
                tr.appendChild(td);
            }
            //把tr插入tbody
            tbody.appendChild(tr);
        })
    </script>
</body>
</html>